<template>
  <div class="panel " v-bind:class="[classType]">
    <div class="panel-heading">
      <h3 class="panel-title">
        <slot name="title"></slot>
      </h3>
    </div>

    <div class="panel-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Panel',
    props: {
      types: {
        type: String,
        defaultValue: '',
        required: false
      }
    },
    data() {
      return {
        classType: undefined
      }
    },
    created() {
      this.classType = 'panel-default'

      if (this.types === 'primary' ||
        this.types === 'success' ||
        this.types === 'info' ||
        this.types === 'warning' ||
        this.types === 'danger' ||
        this.types === 'default') {
        this.classType = 'panel-' + this.types
      }
    }
  }
</script>

<style>
</style>
